<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>
	<view class="layout" v-show="!showLoading">
		<cu-custom :isBack="true" background="rgba(226, 226, 226, 0.1)" :needFill="true">
			<block slot="content">{{ edit==='1' ? '编辑收货地址':'新增收获地址' }}</block>
		</cu-custom>

		<!-- 地址 -->
		<view class="all-address">
			<view class="address-solo">
				<!-- 左边 -->
				<view class="address-left">收货人</view>
				<!-- 右边 -->
				<view class="address-right">
					<input name="contact" v-model="addressObj.contact" type="text" placeholder="请填写联系姓名" />
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="address-solo">
				<!-- 左边 -->
				<view class="address-left">手机号码</view>
				<!-- 右边 -->
				<view class="address-right">
					<input name="telephone" v-model="addressObj.telephone" type="number" placeholder="输入手机号" />
				</view>
			</view>
			<!-- 选择地区 -->
			<view class="address-solo" @click="showRegion = true">
				<!-- 左边 -->
				<view class="address-left">选择地区</view>
				<!-- 右边 -->
				<view class="address-right" style="margin-top: 35rpx;height:auto;">
					<AddressPicker @change="regionChange" :level="3">{{ planLocate }} </AddressPicker>
				</view>
			</view>

			<!-- 详细地址 -->
			<view class="address-solo" style="border:0">
				<!-- 左边 -->
				<view class="address-left">详细地址</view>
				<!-- 右边 -->
				<view class="address-right">
					<input name="address" v-model="addressObj.address" type="text" placeholder="如:A座8楼803室"
						style="border-bottom: 1rpx solid #e2e2e2;" />
				</view>
			</view>
		</view>

		<!-- 设定默认 -->
		<view class="all-address">
			<view class="address-solo" style="border:0">
				<!-- 左边 -->
				<view class="address-left">设为默认地址</view>
				<!-- 右边 -->
				<view class="address-right">
					<view style="float: right;margin-top: 25rpx;">
						<up-switch @change="change_default" space="2" v-model="addressObj.is_default"
							activeColor="#18288f" inactiveColor="rgb(230, 230, 230)">
						</up-switch>
					</view>
				</view>
			</view>
		</view>

		<view class="btnsave" v-if="edit!=='1'" @click="subform">
			保存
		</view>
		<view class="btnsave" v-if="edit==='1'" @click="changeform">
			修改
		</view>


		<!-- 删除 -->
		<view class="btn-dele" @click="subelect" v-if="edit==='1'">
			删除地址
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
	} from '@dcloudio/uni-app'
	import request from '../../common/request';
	import AddressPicker from '@/components/lingdang-AddressPicker/AddressPicker.vue'
	// 加载动画
	const showLoading = ref(true)
	// const addressid = ref(0)

	onMounted(() => {
		setTimeout(() => {
			showLoading.value = false;
		}, 1000);
	});

	// 地区选择

	const addressObj = ref({
		contact: '',
		telephone: '',
		province_id: '',
		city_id: '',
		district_id: '',
		address: '',
		uid: 0,
		is_default: 0,
		region: ''
	})

	const planLocate = ref('请选择')
	// const uid = ref(0);

	function regionChange(region) {
		console.log(addressObj.value)
		addressObj.value.province_id = region.data[0].id
		addressObj.value.city_id = region.data[1].id
		addressObj.value.district_id = region.data[2].id
		console.log("省", addressObj.value.province_id, "市", addressObj.value.city_id, "县", addressObj.value.district_id)
		planLocate.value = region.data[0].name + " " + region.data[1].name + " " + region.data[2].name
		addressObj.value.region = region.data[0].name + " " + region.data[1].name + " " + region.data[2].name
	}

	// 提交表单函数
	// 点击保存
	const subform = () => {
		const uid = uni.getStorageSync('uid')
		addressObj.value.uid = uid
		uni.request({
			url: request.baseUrl + 'ua-add',
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
			},
			data: addressObj.value,
			success: (res) => {
				if (res.data.code === 200) {
					console.log(res)
					uni.showToast({
						title: res.data.data,
						icon: 'success'
					}).then(() => {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/user_address/user_address'
							})
						}, 2000)
					})
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:'error'
					})
				}
			},
			fail: (error) => {
				console.error('请求失败:', error);
				console.log("地址", addressObj.value)
			}
		});
	};
	// 点击得到当 前的详细
	const edit = ref(0)
	const id = ref(0)
	onLoad((e) => {
		console.log("加载时", e)
		edit.value = e.edit
		id.value = e.id
		console.log(edit.value, id.value)
		if (edit.value === '1') {
			getAddressDetail()
		}
	})

// 获取地址
	const getAddressDetail = () => {
		const uid = uni.getStorageSync('uid')
		console.log("uid", uid)
		uni.request({
			url: request.baseUrl+ `ua-detail?uid=` + uid + `&id=` + id.value,
			method: 'GET',
			success: (res) => {
				console.log(res)
				addressObj.value = res.data.data
				console.log("得到", addressObj.value)
				console.log("code的", uid)
			},
			fail: (error) => {
				console.error('请求失败:', error);
			}
		});
	}
	// 修改地址
	const changeform = () => {
		const uid = uni.getStorageSync('uid')
		uni.request({
			url:  request.baseUrl+`ua-update?uid=` + uid + `id` + id.value,
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
			},
			data: addressObj.value,
			success: (res) => {
				if(res.data.code===200){
					console.log(res)
					uni.showToast({
						title: res.data.data,
						icon: 'success'
					}).then(() => {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/user_address/user_address'
							})
						}, 2000)
					})
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:'error'
					})
				}
				console.log("修改地址", res)
			},
			fail: (error) => {
				console.error('请求失败:', error);
				console.log("地址", addressObj.value)
			}
		})
	}

	// 删除
	function subelect() {
		uni.showModal({
			title: '确定删除该收货地址吗',
			success() {
				const uid = uni.getStorageSync('uid')
				uni.request({
					url: request.baseUrl+ `ua-del?uid=` + uid + `&id=` + id.value,
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: {
						uid: uid,
						id: id.value
					},
					success(res) {
						if(res.data.code===200){
							console.log(res)
							uni.showToast({
								title: res.data.data,
								icon: 'success'
							}).then(() => {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/user_address/user_address'
									})
								}, 2000)
							})
						}else{
					uni.showToast({
						title:res.data.msg,
						icon:'error'
					})
				}
					}
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		.all-address {
			background-color: #fff;
			margin-top: 20rpx;
			width: 750rpx;
			overflow: hidden;

			.address-solo {
				border-bottom: 1rpx solid #E5E5E5;
				height: 108rpx;
				width: 702rpx;
				margin: auto;

				.address-left {
					width: 200rpx;
					float: left;
					line-height: 108rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					// color: #333333;
					text-align: left;
				}

				.address-right {
					float: right;
					width: 500rpx;
					height: 108rpx;
					background-position: right;
					background-size: 11rpx 20rpx;
					background-repeat: no-repeat;

					input {
						width: 500rpx;
						line-height: 108rpx;
						height: 108rpx;
						font-size: 26rpx;
					}
				}
			}
		}

		// 保存
		.btnsave {
			width: 670rpx;
			height: 90rpx;
			// border: 1px solid red;
			margin: 70rpx 40rpx 0 40rpx;
			background: #18288f;
			color: #ffffff;
			border-radius: 50rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			padding: 25rpx 308rpx 0 306rpx;
		}

		.btn-dele {
			width: 670rpx;
			height: 90rpx;
			// border: 1px solid red;
			margin: 70rpx 40rpx 0 40rpx;
			background: #b3b3b3;
			color: #ffffff;
			border-radius: 50rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			padding: 25rpx 272rpx 0 272rpx;
		}
	}
</style>